<template>
	<view class="content">
		<scroll-view scroll-x class="top-aside" scroll-with-animation>
			<view v-for="(item,index) in tabList" :key="item.id" class="top-aside-item" :class="{active: item.id === currentId}" @click="tabtap(item)">
				{{item.name}}
			</view>
		</scroll-view>
		<swiper    :duration="1000" style="height: 100%;">
			<swiper-item style="overflow: hidden;">
				<scroll-view scroll-y style="height: 100%;" @scrolltolower="reflash">
					<goods-list :goodsList="goodsList"></goods-list>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import goodsList from '@/components/goods-list/goods-list.vue'
	import {listGoods, listType} from "../../api/goods";
	export default {
		components:{goodsList},
		data() {
			return {
				tabList:[],
				page:1,
				order:null,
				type:38,
				goodsList:[],
				currentId:0
			}
		},
		onLoad(){
			this.listType()
			this.listGoods(this.type)
		},
		methods: {
			async listType(){
				const {data:res} = await listType()
				this.tabList = res
				this.type = res[0].id
				this.currentId = res[0].id
			},
			tabtap(item){
				if(item.id==this.currentId){
					return
				}else{
					this.currentId = item.id
					this.page=1
					this.goodsList=[]
					this.listGoods(item.id)
				}
				
				
			},
			async listGoods(type){
				const {data:res} = await listGoods(this.page,type,this.order)
			
				this.goodsList =this.goodsList.concat(res)
				this.page++
			},
			reflash(){
				this.listGoods(this.currentId)
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.content
		width 100%
		height 100vh
		background-color #EFEFEF
		.top-aside
			width 100%
			background-color #fff
			height 88rpx
			// display flex
			// justify-content space-around
			// align-items center
			white-space nowrap
			z-index: 10
			.top-aside-item
				display inline-block
				height 100%
				font-size 26rpx
				// align-items center
				line-height 88rpx
				margin 0 30rpx
			.active
				border-bottom 4rpx solid #F0C808
				font-size 30rpx
			
</style>
